<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugs/aip-doc/api-doc.css">

    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <script type="text/javascript" src="/plugs/aip-doc/api-doc.js"></script>
    <script type="text/javascript" src="/plugs/export/html2canvas.min.js"></script>
    <script type="text/javascript" src="/plugs/export/jspdf/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="/plugs/export/jspdf/jspdf.debug.js"></script>
    <!--<script type="text/javascript" src="/plugs/export/jspdf/jspdf.plugin.autotable.min.js"></script> -->


</head>
<script type="text/javascript">



    $(function () {
            $.getJSON("/json/api-doc.json",function (data) {
                $("#api").apiDocument({data: data,isTree:true});
            });
            //mock
            $(".aip-doc-container").on("click","#mock",function () {
                var data =  $("#api").apiDocument("mock");
                BootstrapDialog.show({title : "MOCK",html:"<pre><cod>"+JSON.stringify(data,null,4)+"</cod></pre>"});
            });
            //导出图片
            $(".aip-doc-container").on("click","#exportPhoto",function () {
                $("#api").bootstrapTreeTable("expandAll");
                html2canvas(document.querySelector("#api")).then(function (canvas) {
                    var oImg = new Image();
                    oImg.src = canvas.toDataURL();  // 导出图片
                    //设置图片跨域访问
                    oImg.crossOrigin = 'anonymous';
                    $(oImg).css({ width: "100%", height: "100%",display: "none"});
                    $(oImg).bootstrapViewer({ src: "src" });
                    $(oImg).trigger("click");
                });
            });

            //导出pdf   jspdf.umd  原生
            $(".aip-doc-container").on("click","#exportPDF",function () {
                $("#api").bootstrapTreeTable("expandAll");
                var doc = new jspdf.jsPDF('p', 'pt', 'a4');
  /*              doc.addFileToVFS("/plugs/export/jspdf/msyhbd.ttc", myFont);
                doc.addFont("MyFont.ttf", "MyFont", "normal");*/
                doc.html($("#api").html(), {
                    callback: function (doc) { doc.save('api.pdf'); },
                    elementHandlers : {  '#bypassme': function (element,renderer) {  return true; } },
                    margin: [60, 60, 60, 60],
                    x: 32,  y: 32,
                });
              });


        //导出pdf   jspdf.umd
        $(".aip-doc-container").on("click","#exportPDF1",function () {
                $("#api").bootstrapTreeTable("expandAll");
                var pdf = new jsPDF('p', 'pt', 'letter');
                /*              doc.addFileToVFS("/plugs/export/jspdf/msyhbd.ttc", myFont);
                              doc.addFont("MyFont.ttf", "MyFont", "normal");*/

                pdf.fromHTML(
                        $("#api")[0],
                        40,
                        80,
                        { 'width': 552,elementHandlers : {  '#api': function (element,renderer) {  return true; } }},
                        function (dispose) { pdf.save('Test.pdf');}),
                        {top: 80, bottom: 60,left: 40,width: 522}
                 });
        });




</script>

<body>
<div class="aip-doc-container">
    <button id="mock" type="button" class="btn btn-dark">MOCK</button>
    <button id="exportPhoto" type="button" class="btn btn-dark">导出图片</button>
    <button id="exportPDF" type="button" class="btn btn-dark">导出PDF</button>

    <button id="exportPDF1" type="button" class="btn btn-dark">导出PDF1</button>
    <table  id="api">
        <thead>
        <tr>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
        </tr>
        </tbody>
    </table>
</div>


</body>
</html>